<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-11-22 10:47:51
 * 天凉好个秋
-->
<template>
  <div id="module">
    <section class="section-module" v-for="(element, index) in moduleList" :key="index">
      <div
        class="xcx-module-item"
        :class="{ 'on': selectIndex === index }"
        @click.stop="moduleClick(index)"
        @mouseenter="mouseovers(index)"
        @mouseleave="mouseout"
      >
        <template v-if="!prev">
          <span class="xline"></span>
          <span class="xline"></span>
          <span class="xline"></span>
          <span class="xline"></span>
        </template>
        <!-- 图文导航 -->
        <navigationModule :module="element" v-if="element.id == 1" />
        <!-- 轮播图 -->
        <slideshowModule :module="element" v-if="element.id == 2" />
      </div>
      <div class="placeholder" :data-index="index + 1" v-if="placeholder">放在这里</div>
    </section>
  </div>
</template>

<script>
import navigationModule from "@/views/module/navigation.vue";
import slideshowModule from "@/views/module/slideshow.vue";
export default {
  name: "Module",
  props: {
    moduleList: { type: Array },
    prev: { default: false }
  },
  components: {
    navigationModule,
    slideshowModule
  },
  data() {
    return {
      placeholder: false,
      selectIndex: "", //选中
      activeIndex: "", //当前活动active
    };
  },

  methods: {
    //模块点击
    moduleClick(index) {
      this.selectIndex = index;
      this.$emit("moduleClick", index);
    },

    //鼠标移入模块
    mouseovers(index) {
      let top = event.target.getBoundingClientRect().top;
      this.$emit("moduleMouseovers", { top: top, index: index });
    },

    //鼠标离开模块
    mouseout() {
      this.$emit("moduleMouseout");
    },
  },
};
</script>
